<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>欢迎</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-size:22px">用户信息</span>
      <div class="btns">
        <el-button  type="primary" plain>获取信息</el-button>
        <el-button :loading="true">用户中心</el-button>
      </div>
    </div>
  <div  class="text item">
    <img :src="userInfo.avatar" alt="">
    <div>
        <table   cellspacing="0" style="border:1px solid #f1eded">
          <tr>
            <td>用户账号</td>
            <td>用户昵称</td>
            <td>所属部门</td>
            <td>用户角色</td>
          </tr>
          <tr>
            <td>{{userInfo.username}}</td>
            <td>{{userInfo.nickname}}</td>
            <td>{{userInfo.department}}</td>
            <td>{{userInfo.isAdmin?'超急管理员':'不是'}}</td>
          </tr>
        </table>
    </div>
  </div>
</el-card>
<el-card style="width:1000px"> 
   <div  class="center_card">
      <div class="item">
      <img src="../../assets/1.svg" alt="">
      <span>物资资料</span>
    </div>
    <div class="item">
      <img src="../../assets/2.svg" alt="">
      <span>物资库存</span>
    </div>
    <div class="item">
      <img src="../../assets/3.svg" alt="">
      <span>物资入库</span>
    </div>
    <div class="item">
      <img src="../../assets/1.svg" alt="">
      <span>物资发放</span>
    </div>
   </div>
</el-card>
<el-card style="width:1000px;margin-top:20px">
    <div id="main" style="width: 600px;height:400px;"></div>
</el-card>
  </div>
</template>

<script>
 import echarts from "echarts";
export default {
  data(){
    return{
      userInfo : {},
        xData: [],
         yData: [],
        myData: [],
    }
  },
  
  mounted(){
    this.getUserInfo()
        this.loginReport(this.userInfo.username);
            this.draw();
  },
     methods:{

      async getUserInfo(){
            let res =  await this.$http.get("/user/info");
            console.log(res)
            if(res.data.code===200){
              this.userInfo = res.data.data
            }
          },
          //  * 加载登入报表数据
             
            async loginReport(username) {
                const { data: res } = await this.$http.post("loginLog/loginReport", {
                    username: username
                });
                if (res.code !== 200) {
                    return this.$message.error("获取登入报表数据失败:" + res.msg);
                } else {
                    var $this = this;
                    this.xData = [];
                    this.yData = [];
                    this.myData = [];
                    res.data.all.forEach(e1 => {
                        $this.xData.push(e1.days);
                        $this.yData.push(e1.count);
                    });

                    for (var i = 0; i < this.xData.length; i++) {
                        var count = 0;
                        for (var j = 0; j < res.data.me.length; j++) {
                            if ($this.xData[i] === res.data.me[j].days) {
                                count = res.data.me[j].count;
                                break;
                            } else {
                                count = 0;
                            }
                        }
                        $this.myData.push(count);
                    }
                }
                this.draw();
            },

            /**
             * 绘制登入报表
             */
            draw() {
                var myChart = echarts.init(document.getElementById("main"));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: "用户登入统计"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: "none"
                            },
                            dataView: { readOnly: false }, //  缩放
                            magicType: { type: ["bar", "line"] }, ///　　折线  直方图切换
                            restore: {}, // 重置
                            saveAsImage: {} // 导出图片
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#eee'
                            }
                        }
                    },
                    legend: {
                        type:'plain',
                        data: ["全部", "我"]
                    },
                    xAxis: {
                        data: this.xData
                    },
                    yAxis: {
                        type: "value"
                    },
                    series: [
                        {
                            name: "全部",
                            data: this.yData,
                            type: "bar",
                            showBackground: true,
                            animationDuration: 1500,
                            animationEasing: "cubicInOut",
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255，0.5)'
                            },
                        },
                        {
                            name: "我",
                            data: this.myData,
                            type: "bar",
                            showBackground: true,
                            animationDuration: 2000,
                            animationEasing: "cubicInOut"
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
   
       }
}
</script>

<style lang="less" scoped>
      .text {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both,
    
    
  }
  // .clearfix{

  // }
  .btns{
    float: right;
  }
  .box-card {
    width: 1000px;
    margin: 30px 0;
  }
  td{
    text-align: center;
    width: 150px;
    height: 50px;
    border: 1px solid #f1eded;
  }
 
  .center_card{
    display: flex;
    justify-content: space-around;
     .item{
       height: 120px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-around;
    img{
      width: 80px;
    }
  }
  }
</style>
